<template>
	<view>
		<view style="margin: 0 auto;width: 105px;">
			<u-tabs  ref="tabs" :list="list"  @change="changes"></u-tabs>
		</view>
		<!-- 弹出层评论 -->
		<view v-show="show" @click.self='close' class="shiquan_pl_tan">
			<view class="shiquan_pl_c">
				<view class="shiquan_pl_top">
					<text>评论</text>
					<u-icon name="close" color="#666" size="20" @click='close'></u-icon>
				</view>
				<view v-if="tisshow" class="shiquan_pl_list">
					<view v-for="(item,index) in pl.pl" class="shiquan_pl_item">
						<view class="shiquan_pl_author">
							<image :src="item.author" mode=""></image>
						</view>
						<view class="shiquan_pl_info">
							<view style="display: flex; flex-direction: column;" class="">
								<text>{{item.user}}</text>
								<text style="font-size: 13px;">{{item.times}}</text>
							</view>
							<view style="padding: 10px 0; font-size: 14px;" class="">
								{{item.val}}
							</view>
						</view>
					</view>
				</view>
				<view v-else style="display: flex; align-items: center; justify-content: center;" class="shiquan_pl_list">
					暂无评论哦~~~
				</view>
				<view class="shiquan_pl_ipt">
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="value"
						@change='changefn'
					    @confirm="change"
					  ></u--input>
				</view>
			</view>
		</view>
		<view class="tuijian" v-if="current==0">
			<view class="tuijian_view" v-for="item in data">
				<!-- 头像 -->
				<view class="tuijian_view_tou">
					<view style=" display: flex;align-items: center; font-size: 13px;">
						<view style="width: 30px;height: 30px;border-radius:50% ;overflow: hidden; margin-right: 5px;">
							<image :src="item.img" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view >
							<view>
								{{item.name}}
							</view>
							<view >
								{{item.date}}
							</view>
						</view>
					</view>
					<view v-if="item.user != user.id" @click="guanzhufn(item)">
						{{item.gztstate=='关注'?'+ 关注':'已关注'}}
					</view>
				</view>
				<!-- 内容 -->
				<view style="font-size: 14px;margin: 5px 0;">
					{{item.title}}
				</view>
				<!-- 图片 -->
				<view class="tuijian_view_img"   v-if="item.image.length !=0 ">
						<image  v-for="(it,index) in item.image" :style="{'margin':index==1?'0 15px':'0'}" :src="it" mode=""></image>
				</view>
				<!-- 喜欢 -->
				<view style="width: 100%;height: 20%;display: flex;justify-content: space-evenly;align-items: center;">
					<u-icon :name="item.dzstate=='0'?'heart':'heart-fill'" size="28" :color="item.dzstate=='0'?'#666':'red'" @click="likefn(item)"></u-icon>{{item.like}}
					<u-icon name="chat-fill" size="28" @click='plfn(item)'></u-icon>{{item.pl.length}}
					<u-icon name="share" size="28"></u-icon>{{item.zhuan}}
				</view>
			</view>
		</view>

		<view class="guanzhu" v-else>
			<view class="tuijian_view" v-for="item in guanzhu">
				<!-- 头像 -->
				<view class="tuijian_view_tou" style="justify-content: flex-start;">
					<view style=" display: flex;align-items: center;font-size: 13px;">
						<view style="width: 30px;height: 30px;border-radius:50% ;overflow: hidden;">
							<image :src="item.img" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view >
							<view >
								{{item.name}}
							</view>
							<view >
								{{item.date}}
							</view>
						</view>
					</view>
<!-- 					<view v-if="item.user != 0">
						关注
					</view> -->
				</view>
				<!-- 内容 -->
				<view style="font-size: 14px;margin: 5px 0;">
					{{item.title}}
				</view>
				<!-- 图片 -->
				<view class="tuijian_view_img" v-if="item.image.length !=0 ">
					<image  v-for="(it,index) in item.image" :style="{'margin':index==1?'0 15px':'0'}" :src="it" mode=""></image>
				</view>
				<!-- 喜欢 -->
				<view style="width: 100%;height: 20%;display: flex;justify-content: space-evenly;align-items: center;">
						<u-icon :name="item.dzstate=='0'?'heart':'heart-fill'" size="28" :color="item.dzstate=='0'?'#666':'red'" @click="likefn(item)"></u-icon>{{item.like}}
					<u-icon name="chat-fill" size="28" @click='plfn(item)'></u-icon>{{item.pl.length}}
					<u-icon name="share" size="28"></u-icon>{{item.zhuan}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getzwySQTJ,getmsjusermy,updatemsjusermy,updatezwysqtj,getzwysqtj} from '../../../utils/api.js'
	export default {
		data() {
			return {
				show:false,
				tisshow:true,
				value:'',
				title: 'Hello',
				user:{},
				pl:{},
				guanzhu:[],
				list: [{
					name: '推荐'
				}, {
					name: '关注'
				}],
				current: 0,
				data:[]
			}
		},
		onLoad() {
			let token = JSON.parse(uni.getStorageSync('token'))
			this.getuser(token)
		},
		onShow(){
			let token = JSON.parse(uni.getStorageSync('token'))
			this.getuser(token)
		},
		methods: {
			changes(index) {
				// console.log(index);
				this.current = index.index;
			},
			plfn(v){
				 this.pl=v
				 this.tisshow=v.pl.length>0?true:false
				 this.pl.pl=v.pl.map(item=>{
					 item.times=this.timeAgo(item.date)
					 return item
				 })
				 this.show = true
			},
			close() {
			          this.show = false
			          // console.log('close');
			  },
			  changefn(e){
				  this.value=e.replace(/\s+/g, '')
			  },
			  change(){
				 
				 if(this.value){
				 let obj={
					 user:this.user.username,
					 author:this.user.author,
					 val:this.value,
					 date:new Date().toLocaleString()
					}	
					obj.id=this.pl.pl.length>0?this.pl.pl[0].id+1:1
					this.pl.pl.unshift(obj)
					updatezwysqtj({id:this.pl.id,pl:JSON.stringify(this.pl.pl)}).then(res=>{
						this.value=''
						this.tisshow=true
						this.getzwysqtjs(this.pl.id)
					})
				 }else{
					uni.showToast({
						icon:'error',
						title: '不能为空',
						duration: 2000
					});
				 }
			  },
			  // 查找推荐其中一项 
			  getzwysqtjs(id){
				  getzwysqtj(id).then(res=>{
					  let data=res.data
					  data.pl=JSON.parse(data.pl)
					  this.pl=data
					  this.pl.pl=data.pl.map(item=>{
							item.times=this.timeAgo(item.date)
							return item
					  })
				  })
			  },
			// 点赞 / 取消
			likefn(v){
				v.dzstate=v.dzstate=='0'?'1':'0'
				v.like=v.dzstate=='0'?v.like-1:(v.like-0)+1
				let users
				if(v.dzstate=='0'){
					// console.log(this.user);
					this.user.dianz=this.user.dianz.filter(item=>item.id!=v.id)
				}else{
					let obj={
						name:v.title,
						username:v.name,
						author:v.img,
						img:JSON.stringify(v.image),
						num:v.like,
						id:v.id
					}
					this.user.dianz.unshift(obj)
				}
				updatezwysqtj({id:v.id,like:`${v.like}`}).then(res=>{
						this.updatemsjuser({id:this.user.id,dianz:JSON.stringify(this.user.dianz)})
				})
			},
			getuser(v){
				getzwySQTJ().then(res=>{
					res.data.forEach(item=>{
						item.image = JSON.parse(item.image) 
						item.pl = JSON.parse(item.pl)
						item.date=this.timeAgo(item.time)
					})
					this.data = res.data.reverse()
					
					getmsjusermy(v.userid).then(res=>{
						let data=res.data
						data.guanzhu=JSON.parse(data.guanzhu)
						data.dianz=JSON.parse(data.dianz)
						data.guanzhu.forEach(it=>{
							this.data=this.data.map(item=>{
								if((item.user-0)==it.id){
									item.gztstate='已关注'
								}
								return item
							})
							this.guanzhu=this.data.filter(item=>item.gztstate=='已关注')
						})
						data.dianz.forEach(it=>{
							this.data=this.data.map(item=>{
								if(item.id==it.id){
									item.dzstate='1'
								}
								return item
							})
						})
						this.user=data
						// console.log(this.data);
						// console.log(this.user);
					})
				})
			},
			updatemsjuser(v){
				updatemsjusermy(v).then(res=>{
					if(v.id==this.user.id){
						this.getuser({userid:this.user.id})
					}
				})
			},
			getmsjuse(v,txt){
				getmsjusermy(Number(v.user)).then(res=>{
					let data=res.data
					let obj={
						name:data.username,
						img:data.author,
						id:data.id,
						jianjie:data.jinajie
					}
					let obj2={
						name:this.user.username,
						img:this.user.author,
						id:this.user.id,
						jianjie:this.user.jinajie
					}
					data.fensi=JSON.parse(data.fensi)
					let users
					if(txt=='已关注'){
						this.user.guanzhu.unshift(obj)
						users=JSON.parse(JSON.stringify(this.user))
						data.fensi.unshift(obj2)
					}else{
						this.user.guanzhu=this.user.guanzhu.filter(item=>data.id!=item.id)
						users=JSON.parse(JSON.stringify(this.user))
						data.fensi=data.fensi.filter(item=>item.id!=this.user.id)
					}
					users.guanzhu=JSON.stringify(users.guanzhu)
					users.dianz=JSON.stringify(users.dianz)
					this.updatemsjuser(users)
					data.fensi=JSON.stringify(data.fensi)
					this.updatemsjuser(data)
				})
			},
			// 关注 /取关 
			guanzhufn(v){
				v.gztstate=v.gztstate=='关注'?'已关注':'关注'
				this.data=this.data.map(item=>{
					if(v.user==item.user){
						item.gztstate=v.gztstate
					}
					return item
				})
				if(v.gztstate=='已关注'){
					this.getmsjuse(v,'已关注')
				}else{
					this.getmsjuse(v,'关注')
				}
			},
	
		timeAgo(dateTimeStamp) {
		        let result = "";
		        let minute = 1000 * 60;      //把分，时，天 用毫秒表示
		        let hour = minute * 60;
		        let day = hour * 24;
		        let now = new Date().getTime();   //获取当前时间毫秒

				let fl=dateTimeStamp.includes('-')
				if(fl){
					dateTimeStamp = dateTimeStamp.replace(/-/g, '/');
				}
		        let timestamp = new Date(dateTimeStamp).getTime();
		        let diffValue = now - timestamp;//时间差
		        if (diffValue < 0) {
		          return result;
		        }
		        let minC = diffValue / minute;  //计算时间差的分，时，天
		        let hourC = diffValue / hour;
		        let dayC = diffValue / day;
				if (dayC >= 1 && dayC <= 2) {
		          result = " " + parseInt(dayC) + "天前"
		        } else if (hourC >= 1 && hourC <= 24) {
		          result = " " + parseInt(hourC) + "小时前"
		        } else if (minC >= 1 && minC <= 59) {
		          result = " " + parseInt(minC) + "分钟前"
		        } else if (diffValue >= 0 && diffValue <= minute) {
		          result = "刚刚"
		        } else {
		          let Nyear =new Date(dateTimeStamp).getFullYear();
		          let Nmonth = new Date(dateTimeStamp).getMonth() + 1 < 10 ? "0" + (new Date(dateTimeStamp).getMonth() + 1) : new Date(dateTimeStamp).getMonth() + 1;
		          let Ndate = new Date(dateTimeStamp).getDate() < 10 ? "0" + new Date(dateTimeStamp).getDate() : new Date(dateTimeStamp).getDate();

		          result = Nyear + "-" + Nmonth + "-" + Ndate
		        }
		        return result;
		      }
		}
	}
</script>

<style>
	.guanzhu,.tuijian{
		width: 100%;
		height: calc(100vh - 138px) ;
		overflow-y: scroll;
	}
	.tuijian_view{
		width: 96%;
		margin: 20px auto;
		background-color: #fff;
		border-radius:20px ;
		box-shadow:1px 6px 20px 1px #C8C7CC;
		padding: 10px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.tuijian_view_tou{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.tuijian_view_img{
		width: 100%;
		height: 130px;
		display: flex;
		
	}
	.tuijian_view_img image{
		width: 32%;
		height: 100%;
	}
	.shiquan_pl_tan{
		width: 100%;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0; z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
	}
	.shiquan_pl_c{
		width: 100%;
		height: 400px;
		background: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	.shiquan_pl_top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10px; font-weight: 700;
	}
	.shiquan_pl_ipt{
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}
	.shiquan_pl_list{
		width: 100%;
		height: calc(100% - 99px);
		box-sizing: border-box;
		padding: 10px;
		overflow-y: scroll;
	}
	.shiquan_pl_item{
		width: 100%;
		display: flex;
	}
	.shiquan_pl_author{
		padding: 0 5px;
	}
	.shiquan_pl_author image{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.shiquan_pl_info{
		
	}
</style>
